<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/static/js/vue.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" type="text/css" href="/static/css/element-ui.css">
    <link rel="stylesheet" type="text/css
" href="/static/css/fonts/element-icons.woff">
    <link rel="stylesheet" type="text/css" href="/static/css/home.css">
</head>
<body>
<div id="app">

    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="账单管理" name="first" v-loading="loading">
            <div style="height: 86vh; padding: 20px;overflow: auto;">
                <div style="width: 100%">
                    <el-button type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
                    <el-button type="success" icon="el-icon-edit" @click="toEdit" :disabled="multipleSelection == null || (multipleSelection.length !== 1)">修改</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="toDelete" :disabled="multipleSelection == null || (multipleSelection.length === 0)">删除</el-button>
                    <el-button style="float: right" @click="logout">退出登录<i class="el-icon-caret-right"></i></el-button>
                </div>
                <el-table
                        border
                        ref="multipleTable"
                        :data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%; margin-top: 20px"
                        @selection-change="handleSelectionChange"
                        row-key="id">
                    <el-table-column
                            type="selection"
                            reserve-selection="true"
                            align="center"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="用户名"
                            prop="username">
                    </el-table-column>
                    <el-table-column
                            label="昵称"
                            prop="nickName">
                    </el-table-column>
                    <el-table-column
                            label="修改时间"
                            prop="updateTime">
                    </el-table-column>
                    <el-table-column
                            width="250px"
                            align="center">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    style="width: 200px"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleSignIn(scope.$index, scope.row)">签到</el-button>
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-tab-pane>
        <el-tab-pane label="日志管理" name="second">
            <div style="height: 86vh; padding: 20px;overflow: auto;">
                <div style="width: 100%">
                    <el-button type="danger" icon="el-icon-delete" @click="toDeleteLog" :disabled="multipleSelectionLog == null || (multipleSelectionLog.length === 0)">删除</el-button>
                    <el-button style="float: right" @click="logout">退出登录<i class="el-icon-caret-right"></i></el-button>
                </div>
                <el-table
                        border
                        ref="multipleTableLog"
                        :data="tableDataLog"
                        style="width: 100%; margin-top: 20px"
                        @selection-change="handleSelectionChangeLog"
                        row-key="id">
                    <el-table-column
                            type="selection"
                            reserve-selection="true"
                            align="center"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="用户名"
                            prop="username">
                    </el-table-column>
                    <el-table-column
                            label="昵称"
                            prop="nickName">
                    </el-table-column>
                    <el-table-column
                            label="结果"
                            prop="detail">
                        <template slot-scope="scope">
                            {{scope.row.detail.replace(/[^\u4E00-\u9FA5]/g,'')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="签到时间"
                            prop="createTime">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="是否成功"
                            width="100"
                            prop="success">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="scope.row.success ? 'success' : 'danger'"
                                    disable-transitions>
                                <i :class="scope.row.success ? 'el-icon-check' : 'el-icon-close'"></i>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDeleteLog(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-tab-pane>
    </el-tabs>

    <el-dialog title="添加论坛签到账号" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="form" :rules="rules">
            <el-form-item label="论坛用户名" :label-width="formLabelWidth"  prop="username">
                <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="论坛登录密码" :label-width="formLabelWidth" prop="password">
                <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
                <el-input v-model="form.checkPass" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="游戏昵称" :label-width="formLabelWidth">
                <el-input v-model="form.nickName" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="doSubmit">确 定</el-button>
        </div>
    </el-dialog>
</div>

    <script src="/static/js/element-ui.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script>
        let defaultForm = {
            id: '',
            username: '',
            password: '',
            checkPass: '',
            nickName: ''
        }
        new Vue({
            el: '#app',
            data() {
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请输入密码'));
                    } else {
                        callback();
                    }
                }
                var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.form.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                }
                return {
                    activeName: 'first',
                    tableData: [],
                    search: '',
                    form: {
                        id: '',
                        username: '',
                        password: '',
                        checkPass: '',
                        nickName: ''
                    },
                    formLabelWidth: '120px',
                    dialogFormVisible: false,
                    multipleSelection: [],
                    isAdd: false,
                    tableDataLog: [],
                    multipleSelectionLog: [],
                    loading: false,
                    rules: {
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { validator: validatePass, trigger: 'blur' }
                        ],
                        checkPass: [
                            { required: true, message: '请校验密码', trigger: 'blur' },
                            { validator: validatePass2, trigger: 'blur' }
                        ]
                    }
                }
            },
            mounted() {
                this.refreshData()
            },
            methods: {
                refreshData() {
                    let params = {
                        sort: "id,desc"
                    }
                    axios({
                        url: '/api/account',
                        params: params,
                        method: 'get'
                    }).then(res => {
                        this.tableData = res.data.content
                    }).catch(err => {
                        console.err(err)
                    })
                },
                toAdd() {
                    this.isAdd = true
                    this.form = JSON.parse(JSON.stringify(defaultForm))
                    this.dialogFormVisible = true
                },
                toEdit() {
                    this.isAdd = false
                    if (this.multipleSelection != null && this.multipleSelection.length ===1) {
                        this.form = this.multipleSelection[0];
                        this.dialogFormVisible = true
                    }
                },
                toDelete() {
                    if (this.multipleSelection != null) {
                        const ids = this.multipleSelection.map(item => {
                            return item.id
                        })
                        axios({
                            method: 'delete',
                            url: '/api/account',
                            data: ids
                        }).then(res => {
                            setTimeout(() => {
                                this.refreshData()
                            },300)
                        }).catch(err => {
                            console.err(err)
                        })
                    }
                },
                doSubmit() {
                    if (this.isAdd) {
                        axios.post('/api/account', this.form).then(res => {
                            this.dialogFormVisible = false
                            setTimeout(() => {
                                this.refreshData()
                            },300)
                        }).catch(err => {
                            console.err(err)
                        })
                    }else {
                        axios.put('/api/account', this.form).then(res => {
                            this.dialogFormVisible = false
                            setTimeout(() => {
                                this.refreshData()
                            },300)
                        }).catch(err => {
                            console.err(err)
                        })
                    }
                },
                handleSignIn(index, row) {
                    this.$confirm('确认签到吗？', '提示', {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.loading = true
                        axios({
                            method: 'post',
                            url: '/api/account/signIn',
                            data: {
                                accountId: row.id
                            }
                        }).then(res => {
                            console.log(res)
                            this.$notify({
                                title: res.data.success ? '签到成功' : '签到失败',
                                message: res.data.msg,
                                type: res.data.success ? 'success' : 'error',
                                duration: 1000
                            });
                        }).catch(err => {
                            console.log(err.response)
                            this.$notify({
                                title: '签到失败',
                                message: err.response.data.message,
                                type: 'error',
                                duration: 1000
                            });
                        }).finally(() => {
                            this.loading = false
                        })
                    })
                },
                handleEdit(index, row) {
                    this.form = row
                    this.dialogFormVisible = true
                },
                handleDelete(index, row) {
                    const id = row.id
                    let ids = []
                    ids[0] = id
                    axios({
                        method: 'delete',
                        url: '/api/account',
                        data: ids
                    }).then(res => {
                        setTimeout(() => {
                            this.refreshData()
                        },300)
                    }).catch(err => {
                        console.err(err)
                    })
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                logout() {
                    this.$confirm('确认退出吗？', '提示', {
                        confirmButtonText: '确认退出',
                        cancelButtonText: '不，只是点错了',
                        type: 'info'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '账号已退出!'
                        });
                        setTimeout(() => {
                            window.location = '/logout';
                        }, 1000)
                    })
                },
                handleClick(tab, event) {
                    if (tab.index === "0") {
                        this.refreshData()
                    }else if (tab.index === "1") {
                        this.refreshDataLog()
                    }
                },
                refreshDataLog() {
                    let params = {
                        sort: 'id,desc'
                    }
                    axios({
                        url: '/api/signInLog',
                        params: params,
                        method: 'get'
                    }).then(res => {
                        this.tableDataLog = res.data.content
                    }).catch(err => {
                        console.err(err)
                    })
                },
                handleSelectionChangeLog(val) {
                    this.multipleSelectionLog = val;
                },
                handleDeleteLog(index, row) {
                    const id = row.id
                    let ids = []
                    ids[0] = id
                    axios({
                        method: 'delete',
                        url: '/api/signInLog',
                        data: ids
                    }).then(res => {
                        setTimeout(() => {
                            this.refreshDataLog()
                        },300)
                    }).catch(err => {
                        console.err(err)
                    })
                },
                toDeleteLog() {
                    if (this.multipleSelectionLog != null) {
                        const ids = this.multipleSelectionLog.map(item => {
                            return item.id
                        })
                        axios({
                            method: 'delete',
                            url: '/api/signInLog',
                            data: ids
                        }).then(res => {
                            setTimeout(() => {
                                this.refreshDataLog()
                            },300)
                        }).catch(err => {
                            console.err(err)
                        })
                    }
                }
            }
        })
    </script>
</body>
</html>
